<template>
  <div
    ref="search"
    :class="{
      ws_search_module: true,
      isOpen: open
    }"
    v-clickoutside="handleClose"
  >
    <i class="iconfont icon-search"></i>
    <el-input v-model="inputValue" size="mini" @blur="onBlur" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Emit, Prop, Ref, Watch } from 'vue-property-decorator'
@Component
class WsSearch extends Vue {
  @Ref('search') search!: HTMLElement
  @Prop({ required: true }) value!: string | number
  open: boolean = false
  inputValue: string | number = this.value
  mounted() {
    this.search.addEventListener('mouseenter', () => {
      if (!this.open) this.open = true
    })
  }
  @Emit('change')
  @Watch('inputValue')
  value_handler(newVal: string | number) {
    return newVal
  }
  @Emit('blur')
  onBlur() {
    return this.inputValue
  }
  handleClose() {
    this.open = false
  }
}
export default WsSearch
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.ws_search_module {
  box-sizing: border-box;
  padding: 0 6px;
  border-radius: 20px;
  overflow: hidden;
  #flex(row, center, space-between);
  #color(background-color, --primary-bg-color);
  /deep/.el-input {
    border: none;
    width: 0;
    transition: all 0.5s ease;
    .el-input__inner {
      border: none;
      padding-left: 5px;
      #color(background-color, --primary-bg-color);
    }
  }
}
.isOpen {
  /deep/.el-input {
    width: 100px;
  }
}
</style>
